<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"> </div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/jquery.js"></script>
    <script type="text/babel">
        class Mylife extends React.Component {
            /* 初始化数据,state 用,绑定react的方法,
            可以删除,因为继承的时候,默认会写 */
            constructor(props) {
                super(props)
                this.state = {
                    name: '王五',
                    age: 10
                }
            }
            myclick = (params) => {
                // name 从服务器端获取来的了
                let { age } = this.state
                age += 10;
                this.setState({ age })
                ReactDOM.unmountComponentAtNode(document.getElementById('app'))
            }
            // 一般是住组件,清除网络访问,清除定时器,或则是延迟器
            componentWillUnmount(){
                this.setState({ age:1000 })
                console.log('我卸载了')                
            }

            render() {
                // 用的es6的解构 const age = this.state.age
                const { age, name } = this.state
                return (
                    <div > 我是主组件--&gt; {age}---{name}
                        <button onClick={this.myclick}>请点击</button>
                        <Mybtn btnprops={age} />
                    </div>

                )
            }
        }
        // 更新阶段的方法,都在子类测试
        class Mybtn extends React.Component {

            constructor(props) {
                super(props)
                this.state = {
                    name: '赵六',
                }
            }            
            componentWillReceiveProps(newprops) {
                console.log('新改变的值', newprops);
                console.log('当前的props', this.props);
            }
            render() {
                const { name } = this.state
                return (
                    <div>{name}== 我是子组件===&gt;{this.props.btnprops} </div>
                )
            }
        }
        ReactDOM.render(<Mylife />, document.getElementById('app'))

    </script>

</body>

</html>